<template>
  <div class="mobile-travel-view common-mobile-view">
    <travel-stats />

    <travel-calendar />

    <draggable-button @click="addClick"/>
  </div>
</template>

<script lang="ts" setup>
import TravelStats from '@/components/Travel/TravelStats.vue'
import TravelCalendar from '@/components/Travel/TravelCalendar.vue'
import DraggableButton from '@/components/Common/DraggableButton.vue'
import { useTravelStore } from '@/store/travel.ts'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

const travelStore = useTravelStore()
const router = useRouter()

onMounted(async () => {
  await travelStore.refreshInfo()
})

const addClick = () => {
  travelStore.travelRecordApiType = 'ADD'
  travelStore.currentTravelRecord = travelStore.getEmptyTravelRecord()
  router.push({ name: 'TravelRecordForm' })
}
</script>

<style lang="scss">
@use "@/styles/home/travel.mobile.module";
</style>
